<style scoped>
.pro-con {
    padding: 0 20px;
    margin-bottom: 50px;
}
.pro-con .ivu-form-item{
    margin-bottom: 0;
}
.hr{
    border:0;
    background-color:#DEDEDE;
    height:1px;
    margin: 15px 0;
}
.pro-con .ivu-col{
    padding-right: 0 !important;

}
 .fr{
    float: right;
}
.pro-pagesize .mr10{
    margin-right: 10px;
}
.search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}


    /*//////////////////////////////*/

.pro-card {
    margin-bottom: 10px;
}
.pro-card-head {
    background-color: #e6e7eb;
    line-height: 38px;
    border: 1px solid #ddd;
}
.pro-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}
.pro-card-headr {
    padding-right: 10px;
    text-align: right;
}
.pro-card-content {
    clear: both;
}
.pro-paramname {
    text-align: center;
    background-color: #e6e7eb;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
}
.pro-paramvalue {
    padding-left: 30px;
    border-right: 1px solid #ddd;
}
.pro-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.mb10{
    margin-bottom: 10px;
}
.search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}
.search-form{
    border-bottom: 1px solid #d9d9d9;
}
.search-form .ivu-col{
    margin-bottom: 15px;
}
.clear{
    clear: both;
}
.table-theme{
    clear: both;
}
.table-action{
    padding-top: 10px;
    padding-bottom: 15px;
}
.inline-cut{
    margin-left: 15px;
    margin-right: 15px;
    width: 1px;
    height: 25px;
    background-color: #edf2f6;
}
.pro-pagesize{
    margin-bottom:10px;

}
.footer{
    position: fixed;
    padding: 0 30px;
    bottom:0;
    background-color:#FFF;
    box-shadow: -1px -3px 2px #E3E3E3;
}
.pro{
}
.pro_head_img{
}
.pro_show_img{
    position: relative;
    height:120px;
}
.close{
    width:15px;
    height:15px;
    position: absolute;
    right:7px;top:7px;
    border-radius: 50%;
    background-color:red;
    color:#FFF;
    line-height:15px;
    text-align: center;
    cursor: pointer;
}
.imgAdd{
    border:1px dotted #EEEEEE;
    height:50px;
    margin-top:10px;
    line-height: 50px;
    text-align: center;
    background-color: #FBFCFE;
}
.site-wrapper {
    width: 95%;
    margin: 0 auto;
}
.bm-view {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
}
.cropper-wrapper {
    margin-top: 10px;
    height: 400px;
}
.cropper-box{
    height: 300px;
}
.btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin:20px 10px 0px 0px;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all .2s ease;
    text-decoration: none;
    user-select: none;
}
.iconclass{
    display: inline-block;
    width: 58px;
    background: #fff;
    border: 1px dashed #dddee1;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease;
    height:58px;
    line-height: 58px;
}
.cailiao{
    margin: 10px 0px 15px ;
}
    .cailiao span:first-child{
        display: inline-block;
        width: 20%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        border: 1px solid #A9A9A9;
        border-right: 0;
        text-align: center;
        vertical-align: middle;
        background-color: #FAFAFA;
        font-weight: 500;
    }
.cailiao .inputBox{
    height: 36px;
    line-height: 34px;
    width: 80%;
    vertical-align: middle;
    padding-left: 5px;
    border:1px solid #A9A9A9;
    display: inline-block;
}
.cailiao .inputBox input{
    border: 0;
    width: 100%;
    outline: none;
}
#footer .ivu-btn-large{
    padding: 6px 10px 7px 10px;
}
</style>
<style>
    .duty .ivu-date-picker-rel:after, .duty .ivu-select:after {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        width: 35px;
        height: 34px;
        border-left: 1px solid #bebebe;
        background-color: #FAFAFA;
    }
    .duty .ivu-form .ivu-form-item-label{
        border:1px solid #BEBEBE;
        border-right: 0;
        background-color: #FAFAFA;
    }
    .duty .ivu-select-single .ivu-select-selection,.duty .ivu-input{
        height: 36px ;
        line-height: 36px;
        border-radius: 0 2px 2px 0;
        border-color: #BEBEBE;
    }
    .duty .ivu-select-single .ivu-select-selection .ivu-select-placeholder,.duty .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
        height: 34px ;
        line-height: 34px;
        padding-right: 34px;
    }
    .duty .ivu-select-arrow{
        right:12px;
        z-index: 9;
    }
    .duty textarea.ivu-input{
        height: inherit;
    }
    .modal5 .ivu-modal-footer{
        background-color: #F2F2F2;
    }
</style>
<template>
    <div class="pro-list">
        <product-title></product-title>
        <div class="pro-con">
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang">
                        快速搜索
                    </h3>
                        <Form  :model="searchForm" class="search-form">
                            <Col :xs="24" :sm="12" :md="12" :lg="4">
                                <Form-item>
                                    <Select size="large" v-model="searchForm.cid"  placeholder="供应商简称" filterable :transfer="true">
                                        <Option value=" ">全部</Option>
                                        <Option v-for="(item,index) in cname_list" :value="item.cid" :key="item.cid">{{item.shortn}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="3" style="padding-right:15px;">
                                <Form-item>
                                    <Input size="large" type="text"  v-model="searchForm.name" placeholder="产品名称" />
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="3" style="padding-right:15px;">
                                <Form-item>
                                    <Select size="large" v-model="searchForm.is_main" placeholder="主副险" :transfer="true">
                                        <Option value=" ">全部</Option>
                                        <Option value="1">主险</Option>
                                        <Option value="2">附加险</Option>
                                        <Option value="3">组合险</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="3" style="padding-right:15px;">
                                <Form-item>
                                    <Select size="large" v-model="searchForm.cate_one" placeholder="一级分类" @on-change="get_cate_two" :transfer="true">
                                        <Option value="">全部</Option>
                                        <template v-for="item in cate_first_list">
                                            <Option :value="item.id"  :key="item.id">{{item.name}}</Option>
                                        </template>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="3" style="padding-right:15px;">
                                <Form-item>
                                    <Select size="large" v-model="searchForm.cate_two" placeholder="二级分类" :transfer="true">
                                        <Option value=" ">全部</Option>
                                        <template v-for="item in cate_two_list">
                                            <Option :value="item.id"  :key="item.id">{{item.name}}</Option>
                                        </template>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="3" style="padding-right:15px;">
                                <Form-item>
                                    <Select size="large" v-model="searchForm.status" placeholder="营销状态" :transfer="true">
                                        <Option value=" ">不限</Option>
                                        <Option value="1">在售</Option>
                                        <Option value="2">停售</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="3" style="padding-right:15px;">
                                <!-- <Form-item>
                                    <Select size="large" v-model="searchForm.is_hot" placeholder="热门状态" :transfer="true" filterable>
                                        <Option value=" ">不限</Option>
                                        <Option value="1">是</Option>
                                        <Option value="0">否</Option>
                                    </Select>
                                </Form-item> -->
                            </Col>
                            <Col :xs="24" :sm="24" :md="24" :lg="2" >
                                <Form-item  style="padding-right:0px;">
                                    <Button size="large"  class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                                </Form-item>
                            </Col>
                            <div class="clear"></div>
                        </Form>
                    <!--<i-col span="24">-->
                        <!--<hr class="hr">-->
                    <!--</i-col>-->
                    <Col span="24" class="table-action mb15" >
                        <Button type="warning" size="large" class="fr" v-if="$isShow('product/create')" icon="plus"  @click="createPro">新增</Button>
                    <!-- <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                            <span class="clear"></span>
                            <Button type="primary" size="large" class="fr" icon="icon iconfont icon-riqi"  @click="headSet">表头设置</Button>
                        </div> -->
                    </Col>
                </Row>
            </div>
            <div class="table-theme highlight_table">
                <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns1" :data="prolist" class=""></Table>
            </div>
            <div id="footer">
            <Row class="pro-pagesize">
                <!-- <Col :md="16" :lg="16">
                        <Button type="primary" :disabled="tableaction" size="large" class="fl mr10"   @click="coff">折标系数</Button>
                       
                </Col> -->
                <Col :md="16" :lg="16" >
                        &nbsp;
                        <!-- <Button v-if="$isShow('pro_ratio/create')&&(!$accountType.org_mid)" type="primary" :disabled="tableaction" size="large" class="fl mr10"   @click="coff">设置系数</Button> -->
                        <!-- <Button type="warning" v-if="current.status" :disabled="tableaction" size="large" class="fl mr10"   @click="status_off">下架</Button> -->
                        <!-- <Button type="success" v-if="!current.status" :disabled="tableaction" size="large" class="fl mr10"   @click="status_on">在售</Button> -->
                        <Button v-if="$isShow('product/del')"  type="error" :disabled="tableaction" size="large" class="fl mr10 "   @click="remove">删除</Button>
                        <Button v-if="$isShow('product/update')" type="info" :disabled="tableaction" size="large" class="fl mr10"   @click="toDetail">编辑</Button>
                        <!-- <Button v-if="$isShow('pro_agreement/create')" type="success" :disabled="tableaction" size="large" class="fl mr10"  @click="createAgenty">代理协议({{current.agreement_count?'有':'无'}})</Button> -->
                        <!-- <Button v-if="$isShow('pro_fee/fee_list')" type="primary" :disabled="tableaction" size="large" class="fl mr10"  @click="fee">费用政策({{current.free_count?current.free_count:0}})</Button> -->
                        <!-- <Button v-if="$isShow('pro_duty/duty_list')" type="warning" :disabled="tableaction" size="large" class="fl mr10"   @click="modal5True">保险责任({{current.duty_count?current.duty_count:0}})</Button>
                        <Button v-if="$isShow('product/get_pro_img')" type="success" :disabled="tableaction" size="large" class="fl mr10"   @click="modal2True">产品宣传({{current.news?'有':'无'}})</Button>
                        <Button v-if="$isShow('product/question_list')" type="warning" :disabled="tableaction" size="large" class="fl mr10"  @click="faq">常见问题({{current.question_count?current.question_count:0}})</Button>
                        <Button v-if="$isShow('product/payment_create')" type="primary" :disabled="tableaction" size="large" class="fl mr10"  @click="modal4True">理赔服务({{current.payment_count?'有':'无'}})</Button>
                        <Button v-if="$isShow('product/danger_create')" type="warning" :disabled="tableaction" size="large" class="fl mr10"  @click="modal3True">风险提示({{current.danger_count?current.danger_count:0}})</Button> -->
                        
                        <!-- <Button type="success" :disabled="tableaction" size="large" class="fl mr10"  @click="createPro">保险条款</Button> -->
                </Col>
                <!-- <Col :md="16" :lg="16" v-else>
                    &emsp;
                </Col> -->
                <Col :md="8" :lg="8" class="tRight">
                    <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
        </div>
        </div>
        
        <Modal
            v-model="modal1"
            title="设置表格头部"
            ok-text="关闭"
            cancel-text=""
        >
            <CheckboxGroup v-model="tableHeadArray" @on-change="headSet">
                <template v-for="(item,index) in columnList">
                    <Checkbox :label="index" v-if="index!=='index'">{{item.title}}</Checkbox>
                </template>
            </CheckboxGroup>
        </Modal>
        <Modal
            v-model="modal2"
            title="产品宣传"
            ok-text="保存设置"
            @on-ok="pro_img"
            :mask-closable="false"
        >
        <div class="pro">
            <div class="pro_show">
                <Row class="" style="padding:0 5px 10px;border-bottom:1px dotted #D7D7D7;">
                    <Col span="14" >
                        <img :src="banner" alt="" style="width:260px;height:103px;">
                    </Col>
                    <Col span="10" class="" style="padding:10px 0;">
                        <div style="color:#FE9901;font-size:16px;font-weight:bold;">头部宣传图片</div>
                        <p style="color:#BABABA;line-height:25px;">注：图片固定800x314</p>
                        <Button type="primary" style="border-radius:2px;padding-right:30px;padding-left:30px;" @click="pro_banner">立即上传</Button>
                    </Col>
                </Row>
                <Row style="padding:0px 5px;">
                    <Col span="24">
                        <div style="color:#FE9901;font-size:16px;font-weight:bold;padding:10px 0;">
                            产品图片
                        </div>
                        <div >
                            <template v-for="(item,index) in img_list">
                                <div class="pro_show_img">
                                    <img :src="item" alt="" style="width:100%;height:120px;">
                                    <span @click="imgRemove(index)" class="close">X</span>
                                </div>
                            </template>
                        </div>
                        <div class="imgAdd" @click="pro_show_imgAdd">
                            <Icon type="plus" style="color:#5E88E5;font-size:20px;"></Icon>
                            <input type="file" style="display:none" id="imgAddBtn">
                        </div>
                    </Col>
                </Row>
            </div>
        </div>
        </Modal>
        <Modal v-model="modal3"
               title="风险提示"
               ok-text="确定"
               cancel-text=""
        >
            <Row>
                <i-col :md="24" :lg="24">
                    <div style="color:#FE9901;font-size:16px;font-weight:bold;padding-bottom:10px;">新增添加</div>
                </i-col>
            </Row>
            <Row>
                <i-col :md="24" :lg="24">
                    <i-input type="textarea" :rows="4" placeholder="请输入风险提示内容" v-model="fengxianCont"></i-input>
                </i-col>
                <i-col :md="24" :lg="24" style="padding: 10px 0;border-bottom: 1px solid #D4D4D4;">
                    <i-button class="radius" style="background-color: #368AF0;color: #FFF;" @click="fengxianSubmit">提交添加</i-button>
                </i-col>
                <i-col :md="24" :lg="24" style="margin: 10px 0;background-color: #EDF2F6;padding: 10px;" v-if="fengxian.length>0">
                    <template v-for="(item,index) in fengxian">
                        <Tag type="dot" closable color="blue" @on-close="removeFengxian(item.id,index)" :key="item.id">{{item.content}}</Tag>
                    </template>
                </i-col>
            </Row>
        </Modal>
        <Modal
            v-model="modal4"
            title="理赔服务"
            ok-text="保存设置"
            @on-ok="lipei_banner"
            :mask-closable="false"
            :width="500"
            cancel-text=""
        >
            <div class="pro">
                <div class="pro_show">
                    <Row class="" style="padding:0 5px 10px;border-bottom:1px dotted #D7D7D7;">
                        <Col span="17" >
                            <img :src="lipei.banner" alt="" style="width:300px;height:118px;">
                        </Col>
                        <Col span="7" class="" style="padding:10px 0;">
                            <div style="color:#FE9901;font-size:16px;font-weight:bold;">理赔流程</div>
                            <p style="color:#BABABA;line-height:25px;">注：图片固定800x314</p>
                            <Button type="primary" style="border-radius:2px;padding-right:30px;padding-left:30px;"
                                    @click="lipei_bannerFile">立即上传
                            </Button>
                        </Col>
                    </Row>
                    <Row style="padding:0px 5px;">
                        <Col span="24">
                        <div style="color:#FE9901;font-size:16px;font-weight:bold;padding:10px  0;">
                            理赔材料
                        </div>
                        <div >
                                <div class="cailiao">
                                    <span>材料名称</span><span class="inputBox"><input v-model="lipei.cailiaoName"></input></span>
                                </div>
                                <div class="cailiao">
                                    <span>材料文档</span><span class="inputBox" style="background-color: #F0F0F0;width:70%;" disabled>{{lipei.cailiaoInput}}</span><i-button type="success" style="width: 10%;padding: 0;" class="textC" @click="cailiaoClick">上传</i-button>
                                    <input type="file" style="display:none;" id="cailiao" @change="cailiaoChange($event)">
                                </div>
                                <i-button type="primary" style="padding: 0 25px;" @click="cailiaoSubmit"> 提交上传</i-button>
                        </div>
                        <div style="padding: 10px;background-color: #EDF2F6;margin-top: 15px;">
                                <template v-for="item in lipei.paymen">
                                    <Tag :name="item.id" closable color="blue" type="dot" @on-close="remove_lipei(item.id)">{{item.name}}</Tag>
                                </template>
                        </div>
                        </Col>
                    </Row>
                </div>
            </div>
        </Modal>
        <Modal v-model="modalInput" width="1200" ok-text="上传图片"  @on-ok="uploadHeadimg">
            <Row class="cropper-wrapper">
                <Col span="11" class="cropper-box">
                <vueCropper
                    ref="cropper"
                    :img="headImg.img"
                    :autoCrop="headImg.autoCrop"
                    :autoCropWidth="headImg.autoCropWidth"
                    :autoCropHeight="headImg.autoCropHeight"
                    :fixedBox="headImg.fixedBox"
                    :canMoveBox="headImg.canMoveBox"
                    @realTime="realTime"
                ></vueCropper>
                <label class="btn" for="upload2">打开图片</label>
                <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
                <!-- <button @click="finish2('base64')" class="btn">裁剪</button> -->
                </Col>
                <Col span="7" offset="1">
                <!-- <img :src="formItem.headImg.demoimg" /> -->
                <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
                    <div :style="previews.div">
                        <img :src="headImg.img" :style="previews.img">
                    </div>
                </div>
                </Col>
            </Row>
        </Modal>
        <Modal
            v-model="modal5"
            title="新增保险责任"
            ok-text="保存设置"
            @on-ok=""
            :mask-closable="false"
            :width="500"
            cancel-text=""
            class="modal5"
        >
            <div class="pro">
                <div class="pro_show duty">
                    <Form :label-width="90" ref="dutyForm" :rules="dutyVallidate" :model="dutyForm">
                        <Row class="" style="padding:0 5px 10px;">
                            <i-col span="24">
                                <FormItem label="产品名称" prop="id">
                                    <i-select disabled v-model="dutyForm.id">
                                        <i-option :value="dutyForm.id">{{dutyForm.name}}</i-option>
                                    </i-select>
                                </FormItem>
                            </i-col>
                            <i-col span="24">
                                <FormItem label="责任名称" prop="dutyName">
                                    <i-input placeholder="请输入责任名称" v-model="dutyForm.dutyName"></i-input>
                                </FormItem>
                            </i-col>
                            <i-col span="24">
                                <FormItem label="最高保障" prop="">
                                    <i-input placeholder="请输入最高保障，例如：100万" v-model="dutyForm.top"></i-input>
                                </FormItem>
                            </i-col>
                            <i-col span="24">
                                    <i-input type="textarea" :rows="4" placeholder="请输入责任内容" v-model="dutyForm.content"></i-input>
                            </i-col>
                        </Row>
                    </Form>
                </div>
            </div>
        </Modal>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'

import {getComlist ,getCompany,get_cate_first ,get_cate_second,getCompany1} from '../../api/parter'
import {getProList,delPro ,shangjia} from '../../api/product_v2'



import {get_list,del ,get_cate_one, get_cate_two,get_list2} from '../../api/product_v2'
import { getStsTokenWrite,getStsTokenRead } from '../../api/common';



//新
import {_get_parter_list,_get_list,_del,_cate_first,_cate_second,_status_on,_status_off ,_get_pro_img,_pro_img,_danger_create,_danger_delete,_danger_list,_payment_delete,_payment_list,_payment_create,_payment_banner} from '../../api/product_v2'
import VueCropper from 'vue-cropper';
export default {
    data() {
        return {
            //判断47 按钮全部取消
            yid:'0',
            //图片上传modal
            modalInput:false,
            imgRule:'',
            previews: {},
            loading: true,
            headImg: {
                    img: '',
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 509,
                    autoCropHeight: 200,
                    fixedBox: true,
                    canMoveBox:false,
                    // 开启宽度和高度比例
                //    fixed: true,
//                    fixedNumber: [2.55, 1],
//                    demoimg:'',
            },
            //表头设置
            modal1:false,
            //产品宣传
            modal2:false,
            banner:'',
            img_list:[],
            //风险提示
            modal3:false,
            fengxianCont:'',
            fengxian:[],
            //理赔服务
            modal4:false,
            lipei:{
                paymen:[],
                cailiaoName:'',
                cailiaoInput:'',
                banner:'',
            },
            //保险责任
            modal5:false,
            dutyForm:{
                id:'',
                name:'',
                top:'',
                content:'',
                dutyName:'',
            },
            dutyVallidate:{
                id:[
                    {
                        required:true,message:'产品名称不能为空'
                    }
                ],
                dutyName:[
                    {
                        required:true,message:'责任名称不能为空'
                    }
                ],
                top:[
                    {
                        required:true,message:'最高保障不能为空'
                    }
                ],
                content:[
                    {
                        required:true,message:'内容不能为空'
                    }
                ]
            },
            spinShow:false,

            tableHeadArray:["name","cname","is_main","cate_one","limit_age","pay_period","period","is_hot","status"],
            tableloading:true,
            tableaction:true,
            current:{
                id:'',
                status:1,
                name:''
            },
            currentpage:1,
            searchForm: {
                cid:'',
                cate_one:'',
                cate_two:'',
                name:'',
                is_main:'',
                is_hot:'',
                status:'1',
                p:'',
                pagesize:'',
                pay_period:''
            }, //搜索的表格数据
            pay_period_list:[
                '趸交','1年交','2年交','3年交','4年交','5年交','6年交','7年交','9年','11年交','8年交','12年交','13年交','18年交','16年交','26年交','15年','10年交','25年交','24年交','17年交','14年交','28年交','20年交','22年','19年交','27年交','29年交','30年交','年交至9周岁','年交至15周岁','年交至14周岁','年交至12周岁','年交至16周岁','年交至17周岁','年交至18周','年交至20周岁','年交至25周岁','年交至30周岁','年交至35周岁','年交至40周','年交至45周岁','年交至50周岁','年交至55周岁','年交至59周岁','年交至60周','年交至64周岁','年交至65周岁','年交至69周岁','年交至70周岁','年交至75周','年交至80周岁','年交至85周岁','年交至90周岁','年交至95周岁','年交至100周','年交至105周岁','年交至终身'
            ],
            columnList:{
                index:{
                    type: 'index',
                    title:'序号',
                    width: 60,
                    align: 'center',
                },
                name:{
                    title: '产品名称',
                    key: 'name',
                    align:'center'
                },
                cname:{
                    title: '供应商',
                    key: 'cname',
                    align:'center'
                },
                is_main:{
                    title: '主附险类型',
                    key: 'is_main',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                        },params.row.is_main == 1?'主险':'附加险')
                    }
                },
                cate_one:{
                    title: '分类',
                    key: 'cate_one',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{},(params.row.cate_one?params.row.cate_one:'')+'/'+(params.row.cate_two?params.row.cate_two:''))
                    }
                },
                limit_age:{
                    title: '承保年龄',
                    key: 'limit_age',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            props:{
                                className:"nowrap"
                            },
                        },(function(){
                            if(params.row.limit_age&&(params.row.limit_age.indexOf('，')>-1)){
                                let limit_age = params.row.limit_age.split('，');
                                return  limit_age[0]+'-'+limit_age[limit_age.length-1]+'周岁';
                            }else if(params.row.limit_age&&(params.row.limit_age.indexOf('-'))>-1){
                                return params.row.limit_age
                            }else{
                                return '暂无'
                            }
                        })())
                    }
                },
                pay_period:{
                    title: '交费期间',
                    key: 'pay_period',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                                class:"nowrap"
                            },
                        },params.row.pay_period?params.row.pay_period:'暂无')
                    }
                },
                period:{
                    title: '保险期间',
                    key: 'period',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                                class:"nowrap"
                            },
                        },params.row.period?params.row.period:'暂无')
                    }
                },
                // is_hot:{
                //     title: '是否热门',
                //     key: 'is_hot',
                //     render:(h,params)=>{
                //         return h('div',{
                //             attrs:{
                //                class: params.row.is_hot=='1'?'success-color':''
                //             }
                //         },
                //         params.row.is_hot=='1'?'是':'否')
                //     },
                //     align:'center'
                // },
                status:{
                    title: '销售状态',
                    key: 'status',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                               class: params.row.status== '在售' ?'success-color':'nopass-color'
                            }
                        },
                        params.row.status== '在售' ?'在售':'停售')
                    },
                    align:'center'
                },
            },
            columns1: [
                {
                    type: 'index',
                    width: 60,
                    title:'序号',
                    align: 'center',
                },
                {
                    title: '产品名称',
                    key: 'name',
                    align:'center',
                    render:(h,params)=>{
                        let _this = this;
                        return h('a',{
                            attrs:{
                                //  target:"_Blank",
                                //  href:'http://biz.kuaibao365.com/#/pro/update/'+params.row.id
                            },
                            style:{
                            },
                            on:{
                                click(){
                                    _this.$router.push({name:'pro_show',params:{id:params.row.id}});
                                }
                            }
                        },params.row.name)
                    }
                },
                {
                    title: '供应商',
                    key: 'com_name',
                    align:'center'
                },
                {
                    title: '主附险类型',
                    key: 'is_main',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                        },params.row.is_main == 1?'主险':params.row.is_main == 2?'附加险':params.row.is_main == 3?'组合险':'')
                    }
                },

                {
                    title: '分类',
                    key: 'cate_name',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                        },params.row.cate_name||'/')
                    }
                    // render:(h,params)=>{
                    //     return h('div',{},(params.row.cate_one?params.row.cate_one:'')+'/'+(params.row.cate_two?params.row.cate_two:''))
                    // }
                },
                {
                    title: '承保年龄',
                    key: 'limit_age',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            props:{
                                className:"nowrap"
                            },
                        },(function(){
                            if(params.row.limit_age&&params.row.limit_age.indexOf(',')>-1){
                                let limit_age = params.row.limit_age.split(',');
                                return  limit_age[0]+'-'+limit_age[limit_age.length-1]+'周岁';
                            }else if(params.row.limit_age&&params.row.limit_age.indexOf('-')>-1){
                                return params.row.limit_age
                            }else if(params.row.limit_age&&params.row.limit_age.indexOf('，')>-1){
                                let limit_age = params.row.limit_age.split('，');
                                return  limit_age[0]+'-'+limit_age[limit_age.length-1]+'周岁';
                            }else if(params.row.limit_age&&params.row.limit_age.indexOf('-')>-1){
                                return params.row.limit_age
                            }
                            else{
                                return '暂无'
                            }
                        })())
                    }
                },
                {
                    title: '交费期间',
                    key: 'pay_period',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                                class:"nowrap"
                            },
                        },params.row.pay_period?params.row.pay_period:'暂无')
                    }
                },
                {
                    title: '保险期间',
                    key: 'period',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                                class:"nowrap"
                            },
                        },params.row.period?params.row.period:'暂无')
                    }
                },
                // {
                //     title: '是否热门',
                //     key: 'is_hot',
                //     render:(h,params)=>{
                //         return h('div',{
                //             attrs:{
                //                class: params.row.is_hot=='1'?'success-color':''
                //             }
                //         },
                //         params.row.is_hot=='1'?'是':'否')
                //     },
                //     align:'center'
                // },
                {
                    title: '销售状态',
                    key: 'status',
                    render:(h,params)=>{
                        let _this=this;
                        return h('a',{
                            attrs:{
                               class: params.row.status== 1?'success-color':'nopass-color'
                            },
                            on:{
                                click(){
                                    params.row.status==1?_this.status_off(params.row.id):_this.status_on(params.row.id);
                                }
                            }
                        },
                        params.row.status== 1 ?'在售':'停售')
                    },
                    align:'center'
                },
            ],
            prolist:[],
            cateOneAll: [], //一级分类列表
            comlist:[],
            listTotal: 0, //产品总数
            p:1,
            pagesize:10,
            cname_list:[],
            cate_first_list:[],
            cate_two_list:[]
        };
    },
    components: {
        productTitle,
        VueCropper
    },
    computed:{
        
    },
    created() {
        this.getList();
        this.all_company();
        this.get_cate_one();
        this.yid=sessionStorage.getItem('id');
    },
    mounted () {
    //    this.getList();
    //     this.all_company();
    //     this.get_cate_one();
    },
    activated(){
    },
    methods: {
        //点击折标系数,跳转折标系数详情
        coff(){
            this.$router.push({name:'pro_scaling',params:{id:this.current.id,name:this.current.name,if:1}})
        },
        //费用政策跳转
        fee(){
            this.$router.push({name:'fee_manage',params:{id:this.current.id,name:this.current.name}});
        },
        //上传图片模态框
        uploadImg (e) {
            //上传图片
            var file = e.target.files[0];
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
                return false;
            }
            var reader = new FileReader()
            reader.onload = (e) => {
                this.headImg.img = e.target.result
            }
            reader.readAsDataURL(file);
        },
        toBlob(urlData,fileType){
                var bytes=window.atob(urlData),
                    n=bytes.length,
                    u8arr=new Uint8Array(n);
                while(n--){
                    u8arr[n]=bytes.charCodeAt(n);
                }
                return new Blob([u8arr],{type:fileType});
        },
        realTime (data) {
            this.previews = data
        },
        uploadHeadimg () {
            this.$refs.cropper.getCropData((data) => {
                getStsTokenWrite().then((res)=>{
                    if(res.data.err==0){
                        var sts = res.data.data.Credentials;
                        var client = new OSS.Wrapper({
                            region:'oss-cn-hangzhou',
                            accessKeyId: sts.AccessKeyId,
                            accessKeySecret: sts.AccessKeySecret,
                            stsToken: sts.SecurityToken,
                            bucket: 'kuaibao-imgs',
                            secure: true,
                        });
                        var files = document.getElementById('upload2').files[0];
                        var base64 = data.split(',')[1];
                        var fileType = data.split(';')[0].split(':')[1];
                        // base64转blob
                        var blob = this.toBlob(base64,fileType);
                        // blob转arrayBuffer
                        var reader = new FileReader();
                        reader.readAsArrayBuffer(blob);
                        var _this=this;
                        reader.onload = function (event) {
                            var buffer = new OSS.Buffer(event.target.result);
                             //这里用 multipartUpload  上传会报错，所以更改为 put
                             client.put(files.name, buffer).then((results) => {
                            if(results.url){
                                if(_this.imgRule=='banner'){
                                    _this.banner=results.url;
                                }
                                if(_this.imgRule=='img_list'){
                                        _this.img_list.push(results.url);
                                    }
                                    if(_this.imgRule=='paymen_banner'){
                                        _this.lipei.banner=results.url;
                                    }
                                }else{
                                    _this.$Message.error('上传出错');
                                }
                            })
                        }
                    }
                })
            })
            this.modalInput = false;
            // this.headImg.img='';
        },
        //产品宣传
        pro_banner(){
            this.modalInput = true;
            this.imgRule = 'banner';
            this.headImg.fixed=true;
        },
        pro_show_imgAdd(){
            this.modalInput = true;
            this.imgRule = 'img_list';
            this.headImg.fixed=false;
        },
        imgRemove(index){
            this.img_list.splice(index,1);
        },
        modal2True(){
            this.modal2=true;
            this.get_pro_img();
        },
        headSet(){
            this.modal1=true;
            let columnList={
                index:{
                    type: 'index',
                    title:'序号',
                    width: 60,
                    align: 'center',
                },
                name:{
                    title: '产品名称',
                    key: 'name',
                    align:'center'
                },
                cname:{
                    title: '供应商',
                    key: 'cname',
                    align:'center'
                },
                is_main:{
                    title: '主附险类型',
                    key: 'is_main',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                        },params.row.is_main == 1?'主险':'附加险')
                    }
                },
                cate_one:{
                    title: '分类',
                    key: 'cate_one',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{},params.row.cate_one+'/'+params.row.cate_two)
                    }
                },
                limit_age:{
                    title: '承保年龄',
                    key: 'limit_age',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            props:{
                                className:"nowrap"
                            },
                        },params.row.limit_age?params.row.limit_age:'暂无')
                    }
                },
                pay_period:{
                    title: '交费期间',
                    key: 'pay_period',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                                class:"nowrap"
                            },
                        },params.row.pay_period?params.row.pay_period:'暂无')
                    }
                },
                period:{
                    title: '保险期间',
                    key: 'period',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                                class:"nowrap"
                            },
                        },params.row.period?params.row.period:'暂无')
                    }
                },
                is_hot:{
                    title: '是否热门',
                    key: 'is_hot',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                               class: params.row.is_hot=='1'?'success-color':''
                            }
                        },
                        params.row.is_hot=='1'?'是':'否')
                    },
                    align:'center'
                },
                status:{
                    title: '在售状态',
                    key: 'status',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                               class: params.row.status=='在售'?'success-color':'nopass-color'
                            }
                        },
                        params.row.status=='在售'?'在售':'停售')
                    },
                    align:'center'
                },
            };
            this.columns1 = [
                {
                    type: 'index',
                    title:'序号',
                    width: 60,
                    align: 'center',
                }
                ];
            this.tableHeadArray.map(item=>{
                this.columns1.push(columnList[item]);
            })
        },
//        getCom () {
//            new Promise((resolve, reject) => {
//                getComlist().then(response => {
//                    if(response.data.err == 0){
//                        this.comlist = response.data.data
//                    } else {
//                        this.$Message.error(response.data.info);
//                    }
//                    resolve();
//                }).catch(error => {
//                    reject(error);
//                });
//            });
//        },
        //选中当前行数据
        tableCurrentChange(currentRow,oldCurrentRow){

            this.tableaction = false;
            this.current = currentRow;
            console.log(this.current)
//            this.current.id = currentRow._id
//            this.current.name = currentRow.name
//
//            this.current.status = currentRow.status == 1 ? true : false
            this.$set(this.current,'status',currentRow.status  == '在售' ? true : false)
//            console.log( this.current.status)
//            console.log(currentRow)
        },
        //编辑
        toDetail(){
            // let proSearchForm = JSON.stringify(this.searchForm);
            // sessionStorage.setItem('proSearchForm',proSearchForm);
            this.$router.push({name:'pro_update',params:{id:this.current.id}});
        },
        //在售
        status_on(id){
            this.$Modal.confirm({
                title: '提示',
                content: '您正在进行在售操作',
                onOk: () => {
                    let _params = {
                        mid:id
                    }
                    new Promise((resolve,reject)=>{
                        _status_on(_params).then(response =>{
                            if(response.data.err==0){
                                this.getList();
                                this.$nextTick(()=>{
                                    this.tableaction = true;
                                })
                            }else{
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        }).catch(error=>{
                            reject(error);
                        })
                    })
                },
            });
        },
        //下架
        status_off(id){
            this.$Modal.confirm({
                title: '提示',
                content: '您正在进行下架操作',
                onOk: () => {
                    let _params = {
                        mid:id
                    }
                    new Promise((resolve,reject)=>{
                        _status_off(_params).then(response =>{
                            if(response.data.err==0){
                                this.getList();
                                this.$nextTick(()=>{
                                    this.tableaction = true;
                                })
                            }else{
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        }).catch(error=>{
                            reject(error);
                        })
                    })
                },
            });
        },
        get_cate_one(){
            new Promise((resolve,reject)=>{
                get_cate_one().then(res=>{
                    if(res.data.err==0){
                        this.cate_first_list=res.data.data.list;
                    }else{
//                        this.$Message.error(res.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        get_cate_two(){
            let params = {
                cate_one:this.searchForm.cate_one
            }
            new Promise((resolve,reject)=>{
                get_cate_two(params).then(res=>{
                    if(res.data.err==0){
                        this.cate_two_list = res.data.data.list;
                    }else{
//                        this.$Message.error(res.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        all_company(){
            new Promise((resolve,reject)=>{
                _get_parter_list().then(res=>{
                    if(res.data.err==0){
                        this.cname_list = res.data.data;
                        //this.searchForm.cpid = this.$route.query.cpid
                    }else{
                        this.$Message.error(res.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        search(){
            this.searchForm.p = 1
            this.p = 1
            this.searchForm.pagesize=this.pagesize;
            this.tableaction = true
            this.searchForm.p=this.p;
            let _query = Object.assign({},this.searchForm,{p:1,pagesize: this.pagesize})
            this.$router.push({name:'pro',query:_query})
            this.getList(-1)
        },
        getList(id) {
            this.searchForm.p=this.$route.query.p;
            this.searchForm.pagesize=this.pagesize;
            new Promise((resolve, reject) => {
                get_list2(this.searchForm).then(response => {
                    if(response.data.err==0){
                        this.prolist=[];
                        this.listTotal = response.data.data.total;
                        // response.data.data.list.map((val,index)=>{
                        //     if(val.pay_period){
                        //         // val.pay_period = val.pay_period.join(',');
                        //         // val.period = val.period.join(',');
                        //     }
                        // });
                        if(id == -1){
                            this.$refs['pages'].currentPage = 1
                        }
                        this.prolist = response.data.data.list;
                        this.tableloading = false
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        remove() {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该条记录?',
                onOk: () => {
                    var _param = {
                        mid:this.current._id
                    }
                    new Promise((resolve, reject) => {
                        _del(_param).then(response => {
                            if(response.data.err == 0){
                                this.$Message.success(response.data.info);
                                // this.getList();
                                location.reload();
                            } else {
                                this.$Message.error(response.data.info);
                            }                       
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                },
            });
            
        },
        createPro() {
            this.$router.push({name:'pro_create',params:{id:'',cid:''}});
        },
        pageChange(value) {
            this.p = value;
            let _query = Object.assign({},this.searchForm,{p:value,pagesize: this.pagesize})
            console.log(_query)
            this.$router.push({name:'pro',query:_query})
            this.getList();
        },
        pageSizeChange(value) {
            this.pagesize = value;
            this.getList();
        },
        //常见问题跳转
        faq(){
            this.$router.push({name:'pro_faq',params:{id:this.current.id,name:this.current.name}});
        },
        //产品宣传
        get_pro_img(){
            let _params = {
                mid:this.current.id
            }
            new Promise((resolve,reject)=>{
                _get_pro_img(_params).then(response =>{
                    if(response.data.err==0){
//                        console.log(response.data.data);
                        this.banner = response.data.data.banner;
                            this.img_list = response.data.data.img_list;
//                        this.$nextTick(()=>{
//
//                        })
                        console.log(response.data.date);
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        pro_img(){
            let _params = {
                mid:this.current.id,
                banner:this.banner,
                img_list:this.img_list,
            }
            new Promise((resolve,reject)=>{
                _pro_img(_params).then(response =>{
                    if(response.data.err==0){
                      this.$Message.success('操作成功');
                        this.banner = '';
                        this.img_list = [];
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        modal3True(){
            this.modal3 = true;
            this.danger_list();
        },
        fengxianSubmit(){

            var params= {
                mid:this.current.id,
                content:this.fengxianCont
            }
//            this.fengxian.push(this.fengxianCont);
                new Promise((resolve,reject)=>{
                    _danger_create(params).then(response =>{
                        if(response.data.err==0){
                            this.danger_list();
                            this.fengxianCont="";
                        }else{
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error=>{
                        reject(error);
                    })
                })
        },
        removeFengxian(_id,index){
            let params= {
                danger_id:_id
            }
            new Promise((resolve,reject)=>{
                _danger_delete(params).then(response =>{
                    if(response.data.err==0){
//                        this.fengxian.splice(index,1);
                        this.danger_list();
                        this.fengxianCont="";
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        danger_list(){
            let params={
                mid:this.current.id,
            }
            new Promise((resolve,reject)=>{
                _danger_list(params).then(response =>{
                    if(response.data.err==0){
                        this.fengxian = response.data.data.list;
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })

        },

        //理赔服务
        modal4True(){
            this.modal4=true;
            this.get_lipei();
        },
        lipei_bannerFile(){
            this.modalInput = true;
            this.imgRule = 'paymen_banner';
        },
        get_lipei(){
            let _params = {
                mid:this.current.id
            }
            new Promise((resolve,reject)=>{
                _payment_list(_params).then(response =>{
                    if(response.data.err==0){
                        this.lipei.paymen = response.data.data.list;
                        this.lipei.banner = response.data.data.banner;
                        this.lipei.cailiaoInput = '';
                        this.lipei.cailiaoName = '';
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        create_lipei(url,name){
            let _params = {
                mid:this.current.id,
                name:name,
                file_url:url
            }
            new Promise((resolve,reject)=>{
                _payment_create(_params).then(response =>{
                    if(response.data.err==0){
                      this.get_lipei();
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        remove_lipei(id){
            let _params = {
                payment_id:id
            }
            new Promise((resolve,reject)=>{
                _payment_delete(_params).then(response =>{
                    if(response.data.err==0){
                        this.get_lipei();
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();         
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        cailiaoClick(){
            document.getElementById('cailiao').click();
        },
        cailiaoChange(e){
            if (!/\.(pdf|doc|docx)$/.test(e.target.value)) {
                alert('文件类型必须是pdf,word中的一种')
                return false
            }else{
                this.lipei.cailiaoInput=document.getElementById('cailiao').files[0].name;
            }
        },
        cailiaoSubmit(){
            if(!document.getElementById('cailiao').files[0].name){
                alert('请选择文件!');
                return false;
            }
                var file = document.getElementById('cailiao').files[0];
                const pdf = document.getElementById('cailiao');
                let files=pdf.files[0];
                getStsTokenWrite().then((res)=>{
                    if(res.data.err==0){
                        var sts = res.data.data.Credentials;
                        var client = new OSS.Wrapper({
                            region:'oss-cn-hangzhou',
                            accessKeyId: sts.AccessKeyId,
                            accessKeySecret: sts.AccessKeySecret,
                            stsToken: sts.SecurityToken,
                            bucket: 'kuaibao-imgs',
                            secure: true,
                        });
                        client.multipartUpload(files.name, files, {

                        }).then((results) => {
                            if(file.size>100){
                                this.create_lipei(results.res.requestUrls[0].split('?')[0],files.name);
                            }else if(results.url){
                                //pdf  oss路径
                                this.create_lipei(results.url,files.name);
                            }else{
                                this.$Message.error('上传出错');
                            }
                        })
                    }
                })
            },
        lipei_banner(){
            let _params = {
                banner:this.lipei.banner,
                mid:this.current.id
            }
            new Promise((resolve,reject)=>{
                _payment_banner(_params).then(response =>{
                    if(response.data.err==0){
//                        this.get_lipei();
                        this.$Message.success('操作成功');
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error=>{
                    reject(error);
                })
            })
        },
        //保险责任
        modal5True(){
            this.$router.push({name:'duty_list',params:{id:this.current.id,name:this.current.name}})
        },
        createAgenty(){
            //去往代理协议列表
            // this.$router.push({name:'agency_list',params:{name:this.current.name,id:this.current.id}});
            //去往代理协议 新增、修改
            if(this.current.agreement_id){
                this.$router.push({name:'agency_update',params:{id:this.current.id,name:this.current.name,agency_id:this.current.agreement_id}})
            }else{
                this.$router.push({name:'agency_create',params:{id:this.current.id,name:this.current.name}})
            }
            
        },
        
    },
};
</script>
